import React from 'react'
import { Flex } from 'antd-mobile'
import './dongtai.css'
import { withRouter, HashRouter as Router, Route, Switch } from "react-router-dom"

class Content extends React.Component {
    constructor() {
        super()
        this.state = {
            dongtai: []
        }
    }

    componentDidMount() {
        fetch("http://106.12.79.128:666/event?pagesize=30&lasttime=1556740526369")
            .then(body => body.json())
            .then(res => {
                this.setState({
                    dongtai: res.event
                })
            })
    }
    // 跳转发布路由
    release_video() {
        this.props.history.push('/dongtai/release')
    }

    //点击添加关注
    concern(userId) {
        fetch(`http://106.12.79.128:666/follow?id=${userId}&t=1`)
            .then(body => body.json())
            .then(res => {
                if (res.code == 200) { alert('关注成功！') }
                else { alert("关注失败");console.log(res) }
            })
    }

    //给动态点赞
    like(threadId) {
        fetch(`http://106.12.79.128:666/resource/like?t=1&type=6&threadId=${threadId}`)
            .then(body => body.json())
            .then((res) => {
                console.log(res)
                if (res.data) {
                    this.setState({

                    })
                }
            })
    }
    //进入动态详情路由
    get_detail(id, threadId) {
        // console.log(id)
        this.props.history.push(`/dongtai/dt_details?actId=${id}&threadId=${threadId}`)
    }


    render() {
        let { dongtai } = this.state
        console.log(dongtai)
        // dongtai.map(item => console.log(item.rcmdInfo))

        return (
            <div>
                <div>
                    <ul className='top'>
                        <li>
                            <span className='release'><img style={{ marginTop: '10px', marginRight: '5px' }} src={require("./img/发布 (1).png")} />发动态</span>
                        </li>
                        <li onClick={this.release_video.bind(this)}>
                            <span className='release'><img style={{ marginTop: '10px', marginRight: '5px' }} src={require("./img/发布视频.png")} />发布视频</span>
                        </li>
                    </ul>
                    <hr />
                    <div className='dongtai'>
                        <ul className='dongtai_list' style={{ display: Flex }}>
                            {dongtai.map((item) => <li className='dongtai' key={item.id}>
                                <div className='skip'>
                                    <div className='head'>
                                        <img className='touxiang' src={item.user.avatarUrl} />
                                        <div className='nickfans'>
                                            <span className='nickname'>{item.user.nickname}</span>
                                            <span className='fans'>{item.rcmdInfo ? `${item.rcmdInfo.userReason}` : ``}</span>
                                        </div>
                                        <span className='guanzhu' onClick={this.concern.bind(this, item.user.userId)}>+关注</span>
                                    </div>
                                    <p className='dongtai_msg' onClick={this.get_detail.bind(this, item.actId, item.info.threadId)}>{JSON.parse(item.json).msg}</p>
                                    <img className='video' src={item.user.backgroundUrl} onClick={this.get_detail.bind(this, item.actId, item.info.threadId)} />
                                </div>
                                <div className='operate'>
                                    <span className='part1'><img className='transpond' />{item.info.shareCount}</span>
                                    <span className='part2'><img className='comment' />{item.info.commentCount}</span>
                                    <span className='part3' onClick={this.like.bind(this, item.info.threadId)}><img className='support' />{item.info.likedCount}</span>
                                </div>
                                {/* <p>{item.user.rcmdInfo.reason}</p> */}
                                {/* <span>{item.user.backgroundUrl}</span> */}
                                {/* <video src={}/> */}
                            </li>)}
                        </ul>
                    </div>
                </div>
            </div>

        )
    }
}

export default Content
